<template>
  <view class="headline_box">
    <!-- 左侧 -->
    <view class="left">
      <!-- 标题 -->
      <view class="title">
        <uni-icons
          v-if="isIcon"
          :type="props.icon"
          color="rgb(250, 181, 43)"
          size="22"
        />
        <view class="msg">{{ props.title }}</view>
      </view>
      <!-- 副标题 -->
      <view class="sub_title">{{ props.subTitle }}</view>
    </view>
    <!-- 右侧 -->
    <slot>
      <view class="right">
        {{ props.textRight }}
      </view>
    </slot>
  </view>
</template>

<!-- 标题组件 -->
<script setup>
/**
 * 接受父组件参数
 * @property - icon 图标类型
 * @property - title 标题
 * @property - subTitle 副标题
 * @property - textRight 右侧文字内容
 * @property - isIcon 是否显示图标
 */
const props = defineProps({
  /**
   * 图标类型
   */
  icon: {
    type: String,
    default: 'home-filled',
  },
  /**
   * 标题
   */
  title: {
    type: String,
    default: '',
  },
  /**
   * 副标题
   */
  subTitle: {
    type: String,
    default: '',
  },
  /**
   * 右侧文字内容
   */
  textRight: {
    type: String,
    default: '',
  },
  /**
   * 是否显示图标
   */
  isIcon: {
    type: Boolean,
    default: true,
  },
})
</script>

<style lang="scss" scoped>
.headline_box {
  width: 100%;
  min-height: 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 2rpx;
  font-size: 28rpx;

  .left {
    display: flex;
    flex-direction: column;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgb(42, 41, 41);

      .msg {
        padding-left: 5rpx;
        font-size: 32rpx;
      }
    }

    .sub_title {
      color: rgb(103, 95, 95);
      padding-left: 10rpx;
    }
  }

  .right {
    color: rgb(249, 163, 5);
    font-size: 32rpx;
  }
}
</style>
